<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title> 表单样式 </title>

		<link rel="stylesheet" href="css/bootstrap.3.4.1.css">
		
		<style>
			
			
			.form-control {
				/* min-width: 200px;				 */
			}
			
			
		</style>
	</head>
	
	<!-- 
	
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}
	
	
	
	class="sr-only"  可以用来隐藏label的文字 
	
	
	position:absolute   这个默认是相对视窗的。
	
	
	
	w3c是这么介绍的
	设置元素的形状。唯一合法的形状值是
	
	clip : rect (top, right, bottom, left)
	它是一个css属性，用来进行矩形裁剪，通过传入对应参数，这4个参数的意义为：
	top：矩形上长对应父元素上长的距离(上长就是矩形上边的长)
	right： 矩形右宽对应父元素左宽的距离(右宽就是矩形右边的宽)
	bottom: 矩形下长对应父元素上长的距离
	left： 矩形左宽对应父元素左宽的距离
	————————————————
	版权声明：本文为CSDN博主「hhzzcc_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
	原文链接：https://blog.csdn.net/hhzzcc_/article/details/80325217
	
	
	
	 
	 -->
	<body>

		<div class="container">

			<form action="" class="form-inline">

				<div class="form-group">
					<label class="sr-only" for="">Email</label>
					<input type="text" class="form-control" placeholder="Email">
				</div>


				<div class="form-group">

					<label class="sr-only" for="">Password</label>
					<input type="text" class="form-control" placeholder="Password">
				</div>


				<div class="checkbox">
					<label>
						<input type="checkbox"> Remember me
					</label>
				</div>

				<button type="submit" class="btn btn-primary">Sign in</button>

			</form>

		</div>

	</body>
</html>
